<#import "/spring.ftl" as s>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <title>角色和权限设置</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<#include '../include/baselink.ftl'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>

<body class="dashboard-page">
<#include '../include/skin-toolbox.ftl'>
<#--<!-- Start: Main &ndash;&gt;-->
<div id="main">
<#include '../include/header.ftl'>
<#include '../include/sidebar.ftl'>
    <!-- Start: Content-Wrapper -->
    <section id="content_wrapper">
        <!-- Start: Topbar -->
        <header id="topbar" class="alt">
            <div class="topbar-left">
                <ol class="breadcrumb">
                    <li class="crumb-active">
                        <a href="<@s.url '/'/>">控制台</a>
                    </li>
                    <li class="crumb-icon">
                        <a href="<@s.url '/'/>">
                            <span class="glyphicon glyphicon-home"></span>
                        </a>
                    </li>
                    <li class="crumb-link">
                        系统管理
                    </li>
                    <li class="crumb-trail">角色和权限设置</li>
                </ol>
            </div>
        </header>
    <#--<!-- End: Topbar &ndash;&gt;-->
    <#--<!-- Begin: Content &ndash;&gt;-->
        <section id="content" class="table-layout animated fadeIn">
            <!-- begin: .tray-left -->
            <div class="tray tray-left tray320" data-tray-height="match">

                <div class="row">
                    <div class="col-xs-12">
                        <a class="btn btn-primary btn-block" v-on:click="add" data-toggle="modal" data-target="#saveModal">添加角色</a>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-hover" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>角色名称</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in roles">
                            <td>
                                <a class="btn btn-link btn-sm text-center" v-on:click="editMenu(item)"> {{ item.name }}</a>
                            </td>
                            <td>
                                <a class="btn btn-sm btn-default" v-on:click="update(item.id)" data-toggle="modal" data-target="#saveModal">编辑</a>
                                <a class="btn btn-sm btn-default" v-on:click="deleted(item.id)">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <!-- end: .tray-left -->
            <div class="tray tray-center">
                <div class="page-heading pt10 pb10 mb10">
                    <div class="row">
                        <div class="col-md-12">
                            <h3>{{currentRole.name}}<small>&nbsp;&nbsp;{{currentRole.text}}</small>
                            </h3>
                        </div>
                    </div>

                </div>
                <div class="panel">
                    <div class="panel-heading pn">
                        <ul class="nav panel-tabs-border panel-tabs panel-tabs-left">
                            <li class="active">
                                <a href="#tab_index" data-toggle="tab" aria-expanded="true">操作权限</a>
                            </li>
                            <li>
                                <a href="#tab_data" data-toggle="tab" aria-expanded="false">数据权限</a>
                            </li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content pn br-n admin-form">
                            <div id="tab_index" class="tab-pane active">
                                <div class="panel">
                                    <div class="panel-body">
                                        <form class="form-horizontal" role="form" style="overflow:auto;height: 750px;">

                                            <div id="jstree">

                                            </div>

                                        </form>
                                    </div>
                                    <div class="panel-footer">
                                        <button type="button" class="btn btn-primary" v-on:click="saveRoleMenu()"> 保存操作权限</button>
                                    </div>
                                </div>

                            </div>

                            <div id="tab_data" class="tab-pane">
                                <div class="well well-sm">
                                    <button class="btn btn-primary" v-on:click="addDataAuth" data-toggle="modal" data-target="#saveDataAuthModal">添加数据权限</button>
                                    <span>数据权限(设置该角色的用户可以查看和操作的数据的范围)</span>
                                </div>

                                <div class="panel">
                                <#--<div class="panel-heading">-->
                                <#--<span class="panel-icon">-->
                                <#--<i class="fa fa-table"></i>-->
                                <#--</span>-->
                                <#--<span class="panel-title"> 数据权限(设置该角色的用户可以查看和操作的数据的范围)</span>-->
                                <#--</div>-->
                                    <div class="panel-body">
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-striped table-hover"
                                                   cellspacing="0" width="100%">
                                                <thead>
                                                <tr>
                                                    <th>权限名称</th>
                                                    <th>权限描述</th>
                                                    <th></th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-for="data in dataAuth.list">
                                                    <td>
                                                        <label class="radio-inline mr10">
                                                            <input type="radio"
                                                                   name="inlineRadioOptions"
                                                                   :id="'inlineRadio' + data.id"
                                                                   :value = 'data.id'
                                                                   v-model="dataAuth.userDataAuthId">{{data.name}}
                                                        </label>
                                                    </td>
                                                    <td>{{data.desc}}</td>
                                                    <td>
                                                        <a class="btn btn-sm btn-primary" v-on:click="editDataAuth(data)" data-toggle="modal" data-target="#saveDataAuthModal">编辑</a>
                                                    </td>
                                                </tr>
                                                </tbody>
                                                <tfoot>
                                                <tr v-if="dataAuth.list.length == 0">
                                                    <td colspan="10">
                                                        先设置一下数据权限吧。
                                                    </td>
                                                </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                <#--<div class="panel-footer">-->
                                <#--<button type="button" class="btn btn-primary" v-on:click="saveRoleMenu()"> 保存数据权限</button>-->
                                <#--</div>-->
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    <#--<!-- End: Content &ndash;&gt;-->
    <#--<#include '../include/footer.ftl' />-->
    <#--</section>-->
        <!-- End: Content-Wrapper -->
    </section>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="saveModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 v-if="operatingState == 'add'" class="modal-title" id="myModalLabel">添加角色信息</h4>
                    <h4 v-else class="modal-title" id="myModalLabel">修改角色信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="control-label col-lg-3">角色名称:</label>
                            <div>
                                <div class="bs-component col-lg-8">
                                    <input type="text" class="form-control" placeholder="填写角色名称" v-model="operatingModal.name"/>

                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-3">角色描述:</label>
                            <div>
                                <div class="bs-component col-lg-8">
                                    <input type="text" class="form-control" placeholder="填写角色描述" v-model="operatingModal.text"/>

                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="closeButton" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" v-on:click="save">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <div class="modal fade" id="saveDataAuthModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 v-if="dataAuth.operatingState == 'add'" class="modal-title" id="myModalLabel">添加数据权限信息</h4>
                    <h4 v-else class="modal-title" id="myModalLabel">修改数据权限信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="control-label col-lg-3">数据权限名称:</label>
                            <div>
                                <div class="bs-component col-lg-8">
                                    <input type="text" class="form-control" placeholder="填写数据权限名称" v-model="dataAuth.current.name"/>

                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-3">数据权限编码:</label>
                            <div>
                                <div class="bs-component col-lg-8">
                                    <input type="text" class="form-control" placeholder="填写数据权限描述" v-model="dataAuth.current.code"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-3">数据权限描述:</label>
                            <div>
                                <div class="bs-component col-lg-8">
                                    <input type="text" class="form-control" placeholder="填写数据权限描述" v-model="dataAuth.current.desc"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-3">显示顺序:</label>
                            <div>
                                <div class="bs-component col-lg-8">
                                    <input type="number" class="form-control" placeholder="填写显示顺序" v-model="dataAuth.current.viewOrder"/>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="closeDataAuthModalButton" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" v-on:click="saveDataAuth">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
<!-- Datatables -->

<#include '../include/footer_js.ftl'/>

<script>
    var menuTree;

    function queryTree() {
        $.ajax({
                   type: "POST",
                   url: contentPath + "/api/view/sys/menu/allchilds/0",
                   beforeSend: function (xhr) {
                       xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
                   },
                   dataType: "json",
                   data: null,
                   success: function (data) {
                       $('#jstree').jstree({
                                               core: {
                                                   data:data.data
                                               },
                                               plugins: ["checkbox"]
                                           });

                       menuTree = $('#jstree').jstree(true);
                       menuTree.open_all();

                   },
                   error:function (data) {
                       sweetAlert(data.responseJSON.msg);
                   }
               });
    }

    var app = new Vue({
        el: '#main',
        data: {
            roles: [],
            operatingState:"add",
            operatingModal:{
                id:null,
                name:null,
                text:null
            },
            currentRole: {
                name: null,
                text: null
            },
            edit:{
                roleId:null
            },
            dataAuth:{
                operatingState: 'add',
                list: [],
                current: {
                    name: '',
                    code: '',
                    desc: '',
                    viewOrder: 0
                },
                initValue: 0,
                userDataAuthId: 0
            }
        },
        watch: {
            'dataAuth.userDataAuthId': function() {
                if(this.dataAuth.userDataAuthId != undefined
                   && this.dataAuth.userDataAuthId != 0
                   && this.dataAuth.initValue != 1) {
                    this.saveRoleDataAuth();
                }

                if(this.dataAuth.initValue == 1) {
                    this.dataAuth.initValue = 0;
                }
            }
        },
        created: function () {
            queryTree();
            this.query();
            this.findDataAuths();
        },
        methods: {

            add:function () {
                this.operatingState = "add";
                this.operatingModal = {
                    id: null,
                    name: null,
                    text: null
                };
            },
            update:function(roleId){
                var vue = this;
                this.operatingState = "update";
                this.$http.post(contentPath+"/api/view/sys/role/detail/" + roleId)
                        .then(function (response) {
                            this.operatingModal = response.data.data;
                        },function(error){
                            vue.errorAlert(error.body.msg);
                        });
            },
            query: function () {
                var vue = this;

                this.$http.post(contentPath+"/api/view/sys/role/listall")
                        .then(function (response) {
                            if(response.data.retcode == 2000000){
                                this.roles= response.data.data;
                            }else{
                                vue.errorAlert(response.data.msg);
                            }
                        },function(error){
                            vue.errorAlert(error.body.msg);
                        });
            },
            save:function () {
                var vue = this;
                $("#closeButton").click();

                var path = contentPath + "/api/view/sys/role/save";
                this.$http.post(path, this.operatingModal)
                        .then(function (response) {
                            if(response.data.retcode == 2000000){
                                this.query();
                                vue.successAlert("保存成功");
                            }else{
                                vue.errorAlert(response.data.msg);
                            }
                        },function(error){
                            vue.errorAlert(error.body.msg);
                        });
            },
            findDataAuths: function() {
                var vue = this;
                this.$http.get(contentPath + "/api/view/sys/dataauth/list/all").then(function(response){
                    if(response.data.retcode == 2000000){
                        this.dataAuth.list= response.data.data;
                    }else{
                        vue.errorAlert(response.data.msg);
                    }
                },function(error){
                    if(error.status == '404') {
                        vue.errorAlert('404:' + error.url);
                        return;
                    }
                    console.log(error);
                    vue.errorAlert(error.body.msg);
                })
            },
            addDataAuth: function() {
                this.dataAuth.operatingState = "add";
                this.dataAuth.current = {
                    name: '',
                    code: '',
                    desc: '',
                    id: null,
                    viewOrder: 0
                };
            },
            editDataAuth: function(dataAuth) {
                var $vue = this;
                this.dataAuth.current = {
                    name: dataAuth.name,
                    code: dataAuth.code,
                    desc: dataAuth.desc,
                    id: dataAuth.id,
                    viewOrder: dataAuth.viewOrder
                };
                this.dataAuth.operatingState = "update";
            },
            saveDataAuth: function() {
                var vue = this;
                $("#closeDataAuthModalButton").click();

                var path = contentPath + "/api/view/sys/dataauth/save";
                this.$http.post(path, this.dataAuth.current)
                        .then(function (response) {
                            if(response.data.retcode == 2000000){
                                this.findDataAuths();
                                vue.successAlert("保存成功");
                            }else{
                                vue.errorAlert(response.data.msg);
                            }
                        },function(error){
                            vue.errorAlert(error.body.msg);
                        });
            },
            saveRoleDataAuth: function() {
                var $vue = this;

                var req ={
                    roleId:this.edit.roleId,
                    dataAuthId:this.dataAuth.userDataAuthId
                };
                this.$http.post(contentPath + "/api/view/sys/dataauth/save/permission",req)
                        .then(function (response) {
                            if(response.data.retcode == 2000000){
                                $vue.successAlert("保存成功！", "保存成功");
                            }else{
                                $vue.errorAlert(response.data.message);
                            }
                        },function(error){
                            $vue.errorAlert(error.body.msg);
                        });
            },
            deleted:function (id) {
                var vue = this;
                swal(
                        {
                            title: "确定删除该角色？",
                            showCancelButton: true,
                            closeOnConfirm: true,
                            showLoaderOnConfirm: true
                        },
                        function () {
                            vue.$http.post(contentPath + "/api/view/sys/role/delete/" + id)
                                    .then(function (response) {
                                        if(response.data.retcode == 2000000){
                                            this.query();
                                            vue.successAlert("删除成功");
                                        }else{
                                            vue.errorAlert(response.data.message);
                                        }
                                    },function(error){
                                        vue.errorAlert(error.body.msg);
                                    });
                        }
                );
            },
            clean:function () {
                menuTree.uncheck_all();
            },
            editMenu:function (item) {
                this.clean();
                var $vue = this;
                this.currentRole = item;
                this.edit.roleId = item.id;
                this.$http.post(contentPath + "/api/view/sys/menu/roleId/"+item.id)
                        .then(function (response) {
                            var menuIds = response.data.data;
                            $.each(menuIds,function (i,e) {
                                var menu = menuTree.get_node(e);
                                menuTree.check_node(menu);
                            });
                            menuTree.open_all();
                        },function(error){
                            $vue.errorAlert(error.body.msg);
                        });
                this.$http.get(contentPath + "/api/view/sys/dataauth/roleId/" + item.id)
                        .then(function(response){
                            if(response.data.retcode == 2000000){
                                $vue.dataAuth.userDataAuthId = response.data.data;
                                $vue.dataAuth.initValue = 1;
                            } else {
                                $vue.dataAuth.userDataAuthId = 0;
//                                $vue.errorAlert(response.data.message);
                            }
                        },function(error){
                            console.log('獲取当前角色数据权限失败:', error);
                            $vue.dataAuth.userDataAuthId = 0;
                        })
            },

            successAlert: function(message, title) {
                if (toastr != undefined) {
                    toastr.success(message, title);
                } else {
                    swal(message);
                }
            },
            errorAlert: function(message) {
                if (toastr != undefined) {
                    toastr.error(message);
                } else {
                    swal(message);
                }
            },
            saveRoleMenu:function () {
                var $vue = this;

                var menuIds = menuTree.get_selected();
                var req ={
                    roleId:this.edit.roleId,
                    menuIds:menuIds
                };
                this.$http.post(contentPath + "/api/view/sys/role/permission/save",req)
                        .then(function (response) {
                            if(response.data.retcode == 2000000){
                                $vue.successAlert("保存成功！", "保存成功");
                            }else{
                                $vue.errorAlert(response.data.message);
                            }

                        },function(error){
                            $vue.errorAlert(error.body.msg);
                        });
            }
        }
    });

</script>

</body>

</html>
